<template>
  <div>
    <highcharts
      :options="chartOptions"
      style="min-width: 400px; height: 400px"
    ></highcharts>
  </div>
</template>

<script>
  export default {
    name: 'HighChartsCpu',
    props: {
      title: {
        type: String,
        default: 'chart',
      },
      chartsData: {
        type: Object,
        default: () => {
          return {
            //暂时修改
            title: 'chart',
            categoriesX: [
              '0:00',
              '1:00',
              '2:00',
              '3:00',
              '4:00',
              '5:00',
              '6:00',
              '7:00',
              '8:00',
              '9:00',
              '10:00',
              '11:00',
            ],
            series: [
              {
                name: 'yesterday',
                data: [
                  ['一月', 13],
                  ['14:00', 23],
                  ['15:00', 45],
                  ['16:00', 55],
                  ['17:00', 20],
                  ['18:00', 10],
                  ['19:00', 95],
                  { y: 70, color: '#BF0B23' },
                  {
                    y: 20,
                    color: '#BF0B23',
                    marker: { fillColor: '#BF0B23', radius: 10 },
                  },
                ],
                zones: [
                  {
                    value: 80,
                  },
                  {
                    color: '#BF0B23',
                  },
                ],
              },
              {
                name: 'rule',
                data: [-10, 90, 10, 80, 80, 100, 40],
                zones: [
                  {
                    value: 80,
                  },
                  {
                    color: '#BF0B23',
                  },
                ],
              },
              { name: 'today', data: [10, -20, 40, -30, 50, 70, -40] },
            ],
          }
        },
      },
    },
    data() {
      return {
        chartOptions: {
          chart: {
            //图表配置
            style: {
              // fontFamily: "",
              // fontSize: '12px',
              // fontWeight: 'bold',
              // color: '#DADDE1'
            },
          },
          series: this.chartsData.series,
          credits: {
            enabled: false, //右下角水印
          },
          title: {
            text: this.chartsData.title, //标题
          },
          subtitle: {
            text: '', //副标题
          },
          xAxis: {
            title: '',
            // Step: 1,   //显示间隔
            Type: 'category', //坐标轴类型
            // categories: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00'],
            categories: this.chartsData.categoriesX,
            // tickInterval: 1, // 坐标轴刻度间隔
            tickmarkPlacement: 'on', //刻度线对齐方式
            gridLineWidth: 0, //网格线宽度
            labels: {
              //刻度标签
              enable: true,
              // align: 'left',
              x: 0,
              y: 0,
            },
            formatter: function () {
              //标签格式化函数
              return this.value
            },
          },
          yAxis: [
            {
              // 第一个 Y 轴，放置在左边（默认在坐标）
              title: {
                text: '百分比(%)',
              },
              type: 'linear',
              tickInterval: 20, // 坐标轴刻度间隔
              min: 0, //最大最小值
              max: 100,
              labels: {
                align: 'left',
                x: 0,
                y: 0,
                format: '{value:.,0f}',
              },
              showFirstLabel: false,
              plotLines: [
                {
                  //标示线
                  label: {
                    text: '预警线80%', //标签的内容
                    align: 'left', //标签的水平位置，水平居左,默认是水平居中center
                    x: 20, //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
                  },
                  color: 'red', //线的颜色，定义为红色
                  dashStyle: 'longdashdot', //标示线的样式，默认是solid（实线），这里定义为长虚线
                  value: 80, //定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
                  width: 2, //标示线的宽度，2px
                },
              ],
            },
          ],
          legend: {
            //图例
            align: 'center', //水平对齐方式
            verticalAlign: 'bottom', //垂直对齐方式
            layout: 'horizontal', //水平排列
            // floating: true,      //浮动显示图例
            x: 0, //偏移
            y: 0,
            floating: false,
            borderWidth: 0,
          },
          tooltip: {
            shared: true,
            crosshairs: true,
          },
        },
      }
    },
    watch: {
      chartsData: function (newValue) {
        this.chartOptions.title.text = newValue.title
        this.chartOptions.xAxis.categories = newValue.categoriesX
        this.chartOptions.series = newValue.series
      },
    },
  }
</script>

<style scoped></style>
